<template>
  <van-swipe lazy-render class="poster-wrap" :show-indicators="false">
    <van-swipe-item v-for="(item, index) in posterList" :key="index" class="poster-item">
      <img :src="item" class="poster-img" @click="openPreview(index)" />
    </van-swipe-item>
  </van-swipe>
</template>
<script>
import { Swipe, SwipeItem, ImagePreview } from 'vant';

export default {
  name: 'poster',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  data() {
    return {
      posterList: [require('../assets/image/banner-real2.png')],
    };
  },
  methods: {
    openPreview(startIndex) {
      ImagePreview({
        images: this.posterList,
        startPosition: startIndex,
        closeable: true,
        showIndex: true,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.poster-item {
  display: flex;
  justify-content: center;
  .poster-img {
    width: 690px;
    height: 395px;
  }
}
</style>
